<template>
    <el-table
        :data="mappings" stripe
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
            label="路劲">
            <template slot-scope="scope">
                <span :style="{color: theme}">{{ scope.row.path }}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="beanName"
            label="Bean名称">
        </el-table-column>
        <el-table-column
            prop="methodName"
            label="方法名称">
        </el-table-column>
    </el-table>
</template>

<script>
    import { mapGetters } from "vuex";
    import request from '@/router/axios';
    export default {
        props: {
            instanceId: {
                type: String
            }, 
        },
        computed: {
            ...mapGetters(["theme"])
        },
        data() {
            return {
                mappings: []
            }
        },
        mounted() {
            this.queryMappings();
        },
        methods: {
            queryMappings() {
                const url = '/taroco-admin/api/applications/' + this.instanceId + "/mappings";
                request({
                    url: url,
                    method: 'get'
                })
                .then((res) => {
                    let data = res.data;
                    let rows = [];
                    for (let i in data) {
                        let row = {
                            "path": i,
                            "beanName": data[i].bean,
                            "methodName": data[i].method
                        };
                        rows.push(row);
                    }
                    this.mappings = rows;
                });
            }
        },
    }
</script>

<style scoped>

</style>